
export const drawImage = async function(params) {
  let {ctx, url, x, y, w, h} = params;
 

 return new Promise((resolve) => {
    let imgDom = new Image();
    imgDom.src= url;
    imgDom.onload = () => {
      ctx.beginPath();
      ctx.drawImage(imgDom,x,y,w,h);
      ctx.closePath();
      resolve()
    }
      
  })
  }


export const setText = (params) => { 
  let {ctx, text, color, size, x, y, maxLength, align, bold} = params;
  if(bold) {
    ctx.font = `normal bold ${parseInt(size)}px sans-serif`;
  } else {
    ctx.font = `normal ${parseInt(size)}px sans-serif`;
  }
  ctx.textAlign = align ? align : 'center';
  ctx.fillStyle = color;
  if(maxLength) {
    text = maxStrOneLine({ctx, text, maxLength})
  }     
  ctx.fillText(text, x, y + size);
  ctx.restore();
};

// 文字换行
export const drawtext = function(params) {
  //参数说明
  //ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，w：文字最大宽度   maxLine: 最大行数
  let {text, x,  y, textWidthMax, maxLine, fontSize, textAlign, color, isLeft,  titleHeight, bold, ctx} = params
  ctx.font = `normal ${parseInt(fontSize)}px sans-serif`;
  ctx.textAlign = textAlign ? textAlign : 'left';
  ctx.fillStyle = color;
  titleHeight = titleHeight || rpx2px(36)
  
  let chr = text.split("")
  let temp = ""
  let row = []
  for (let a = 0; a < chr.length; a++) {
    if (ctx.measureText(temp).width < textWidthMax && ctx.measureText(temp + (chr[a])).width <= textWidthMax) {
      temp += chr[a];
    } else {
      row.push(temp);
      temp = chr[a];
    }
  }
  row.push(temp);
  let rowLength = row.length
  if(maxLine) {
    rowLength = row.length > maxLine ? maxLine : row.length
  }
  
  for (let b = 0; b < rowLength; b++) {
    
    if (b === rowLength - 1) {
      if(isLeft) {
        ctx.textAlign = 'left';
      }
      if(maxLine && maxLine < row.length) {
        row[b] = row[b].substr(0, row[b].length - 3)
        setText({
          ctx,
          text: row[b] + '...',
          x:  x || 0,
          y: y + b * titleHeight,
          size: fontSize,
          color: color,
          align: 'left',
          bold
        })
      } else {
       setText({
          ctx,
          text: row[b],
          x:  x || 0,
          y: y + b * titleHeight,
          size: fontSize,
          color: color,
          align: 'left',
          bold
        })
      }
    } else {
      setText({
        ctx,
        text: row[b],
        x:  x || 0,
        y: y + b * titleHeight,
        size: fontSize,
        color: color,
        align: 'left',
        bold
      })
    }
  }
  ctx.restore();

};


export const maxStrOneLine = function(params) {
  let {ctx, text, maxLength} = params;
  if (!text) {
    return ''
  }   

  let list = text.split('');
  let curResult = ''
  for (let i = 0; i < list.length; i++) {
    if (maxLength && maxLength <= ctx.measureText(curResult).width) {
    curResult += '...'
    break;
    }
    curResult = curResult + list[i]
  }
  return curResult

};

export const rpx2px = function(px) {
  let ratio = 3 // 清晰度
  let docEl = document.documentElement; //根元素html
  let clientWidth = docEl.clientWidth;
  let dpr = 750/clientWidth
  if (dpr) {
    return parseFloat((px * ratio / dpr).toFixed(2));
  } else {
    return px;
  }
};

// 圆形头像
export const circleImg = async function(params) {
  let {ctx, x, y, w, h, img} = params;


  ctx.save();
  ctx.beginPath();
  ctx.arc(w / 2 + x, h / 2 + y, w / 2, 0, Math.PI * 2, false);
  ctx.clip()
 
  await drawImage({
    ctx: ctx,
    url: img,
    x: x, 
    y: y, 
    w: w, 
    h: h
  });
  await new Promise((resolve) => {
    setTimeout(() => {
      ctx.restore()
      resolve(1)
    }, 200)
  })

  return new Promise((reject) => {
    reject()
  })
}